<template>
  <div>
    <el-card>
      <el-row>
        <h4>Problem: {{ commitCodeForm.problemId }}</h4>
      </el-row>

      <el-form
        :model="commitCodeForm"
        :rules="commitCodeFormRules"
        ref="commitCodeFormRef"
        label-width="100px"
      >
        <el-row>
          <el-col :span="8"><div class="spanconent"></div></el-col>
          <el-col :span="8">
            <el-form-item label="Language: ">
              <el-select
                v-model="commitCodeForm.compilerId"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in supportLanguages"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8"><div class="spanconent"></div></el-col>
        </el-row>

        <el-form-item label="Code: " prop="code">
          <el-input
            rows="15"
            type="textarea"
            v-model="commitCodeForm.source"
          ></el-input>
        </el-form-item>
      </el-form>

      <el-button type="primary" @click="submitSourceCode">提交代码</el-button>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      problemId: 0,

      commitCodeForm: {
        problemId: 0,
        source: "",
        compilerId: 3,
        userId:0
      },

      commitCodeFormRules: {},
      supportLanguages: [
        {
          value: 1,
          label: "C"
        },
        {
          value: 2,
          label: "C++"
        },
        {
          value: 3,
          label: "Java"
        },
        {
          value: 4,
          label: "Pascal"
        },
        {
          value: 5,
          label: "Python"
        }
      ]
    };
  },

  methods: {
    async submitSourceCode() {
    console.log(this.commitCodeForm)

    // 从本地存储中获取数据，这样会存在userId 被修改的问题
    this.commitCodeForm.userId = localStorage.getItem("userId");
     await this.$http.post("judgeAction",this.commitCodeForm)
        .then(response => {
   
          const  {data:res} = response
        
          
          if(res.meta.code !== 200){
            
             return this.$message.error('代码提交失败!')
          }

          this.$message.success('代码提交成功!')
           this.$router.push('/judgepage/'+res.data.submitId)

        })
        .catch(error => console.log(error, "error")); // 失败的返回
    }
  },

  created() {
    // 获取路由传递过来的 问题 Id
    this.commitCodeForm.problemId = this.$route.params.id;
  }
};
</script>

<style scoped>
.el-card {
  height: 900px;
}
</style>
